{% extends 'layout_index.html' %}

{% load static %}

{% block title %}
    <title>学生信息</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/stu_info.css' %}">
    <link rel="stylesheet" href="{% static 'css/class_info.css' %}">
{% endblock %}

{% block main_content %}
    <div class="class-info-container">
        <div class="class-info-title">
            <h3>软件工程学院学生信息</h3>
        </div>

        <!-- 顶部操作栏 -->
        <div class="operation-bar">
            <!-- 搜索和筛选区域 -->
            <form method="get" action="{% url 'stu_list' %}" class="search-form">
                <div class="search-area">
                    <div class="search-group">
                        <input type="text" name="search" class="form-control" placeholder="搜索学生姓名..."
                               value="{{ search_key }}">

                        <select name="search_type" class="form-control">
                            <option value="name" {% if search_type == "name" %}selected{% endif %}>按姓名搜索</option>
                            <option value="id" {% if search_type == "id" %}selected{% endif %}>按学号搜索</option>
                        </select>

                        {% comment %} 按照年级选择 {% endcomment %}
                        <select name="grade" class="form-control">
                            <option value="">选择年级</option>
                            {% for grade in grades %}
                                <option value="{{ grade.grade_id }}"
                                        {% if selected_grade == grade.grade_id|stringformat:"s" %}selected{% endif %}>
                                    {{ grade.get_grade_id_display }}
                                </option>
                            {% endfor %}
                        </select>

                        {% comment %} 按照专业选择 {% endcomment %}
                        <select name="profession" class="form-control">
                            <option value="">选择专业</option>
                            {% for profession in professions %}
                                <option value="{{ profession.0 }}"
                                        {% if profession_filter == profession.0|stringformat:"s" %}selected{% endif %}>
                                    {{ profession.1 }}
                                </option>
                            {% endfor %}
                        </select>

                        <button type="submit" class="btn btn-info">
                            <i class="fa-solid fa-magnifying-glass"></i> 搜索
                        </button>

                    </div>
                </div>
            </form>

            <!-- 添加学生按钮 -->
            <div class="add-button">
                <a href="{% url 'add_stu' %}" class="btn btn-success">
                    <i class="fa-solid fa-plus"></i> 添加学生
                </a>
            </div>
        </div>

        <!-- 学生列表 -->
        <div class="class-list-container">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th width="5%">序号</th>
                        <th width="10%"><i class="fa-solid fa-hashtag"></i> 学号</th>
                        <th width="8%"><i class="fa-solid fa-user"></i> 姓名</th>
                        <th width="5%"><i class="fa-solid fa-venus-mars"></i> 性别</th>
                        <th width="12%"><i class="fa-solid fa-graduation-cap"></i> 专业</th>
                        <th width="10%"><i class="fa-solid fa-calendar"></i> 出生日期</th>
                        <th width="10%"><i class="fa-solid fa-phone"></i> 联系电话</th>
                        <th width="10%"><i class="fa-solid fa-building-columns"></i> 年级</th>
                        <th width="10%"><i class="fa-solid fa-chalkboard"></i> 班级</th>
                        <th width="10%"><i class="fa-solid fa-gear"></i> 操作</th>
                    </tr>
                    </thead>
                    <tbody id="studentTableBody">
                    {% for student in stu_list %}
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td>{{ student.student_id }}</td>
                            <td>{{ student.student_name }}</td>
                            <td>{{ student.get_student_gender_display }}</td>
                            <td>{{ student.get_student_profession_display }}</td>
                            <td>{{ student.student_birthday|date:"Y-m-d" }}</td>
                            <td>{{ student.student_phone }}</td>
                            <td>{{ student.student_class.grade_id.get_grade_id_display }}</td>
                            <td>{{ student.student_class.class_id }}（{{ student.student_class.class_name }}）</td>
                            <td>
                                <div class="btn-group">
                                    <a href="{% url 'update_stu' stu_id=student.student_id %}"
                                       class="btn btn-info btn-sm">
                                        <i class="fa-solid fa-pencil"></i> 修改
                                    </a>
                                    <button class="btn btn-danger btn-sm delete-student"
                                            data-student-id="{{ student.student_id }}">
                                        <i class="fa-solid fa-trash"></i> 删除
                                    </button>
                                </div>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="9" class="text-center">暂无学生信息</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 分页实现 -->
        <div class="pagination-container">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <!-- 首页 -->
                    <li class="page-item {% if not stu_list.has_previous %}disabled{% endif %}">
                        <a class="page-link" href="?page=1">首页</a>
                    </li>
                    <!-- 上一页 -->
                    <li class="page-item {% if not stu_list.has_previous %}disabled{% endif %}">
                        <a class="page-link" href="{% if stu_list.has_previous %}?page=
                            {{ stu_list.previous_page_number }}{% else %}javascript:;{% endif %}">
                            <i class="fa fa-angle-left"></i>
                        </a>
                    </li>

                    <!-- 页码 -->
                    {% for page in stu_list.paginator.page_range %}
                        {% if page == stu_list.number %}
                            <li class="page-item active">
                                <span class="page-link">{{ page }}</span>
                            </li>
                        {% elif page > stu_list.number|add:'-3' and page < stu_list.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page }}">{{ page }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}

                    <!-- 下一页 -->
                    <li class="page-item {% if not stu_list.has_next %}disabled{% endif %}">
                        <a class="page-link" href="{% if stu_list.has_next %}?page=
                            {{ stu_list.next_page_number }}{% else %}javascript:;{% endif %}">
                            <i class="fa fa-angle-right"></i>
                        </a>
                    </li>
                    <!-- 末页 -->
                    <li class="page-item {% if not stu_list.has_next %}disabled{% endif %}">
                        <a class="page-link" href="?page={{ stu_list.paginator.num_pages }}">末页</a>
                    </li>
                </ul>
            </nav>
            <!-- 分页信息 -->
            <div class="text-center">
            <span class="text-muted small">
                第 {{ stu_list.number }}/{{ stu_list.paginator.num_pages }} 页，共 {{ stu_list.paginator.count }} 条记录
            </span>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        $(document).ready(function () {

            // 删除学生
            $('.delete-student').click(function (e) {
                e.preventDefault();
                var stuId = $(this).data('student-id');

                if (confirm('确定要删除这个学生吗？')) {
                    $.ajax({
                        url: "/index/stu/delete/" + stuId + "/",
                        type: "POST",
                        data: {
                            'csrfmiddlewaretoken': '{{ csrf_token }}'
                        },
                        success: function (response) {
                            if (response.status === 'success') {
                                alert('删除成功');
                                location.reload();
                            } else {
                                alert('删除失败：' + response.message);
                            }
                        },
                        error: function () {
                            alert('系统错误，删除失败');
                        }
                    });
                }
            });
        });
    </script>
{% endblock %}